<template>
    <div class="cmt-container">
        <h1 class="title">{{ photoInfo.title }}</h1>
        <div class="subtitle">
            <span>发表时间:{{ photoInfo.add_time | dateFormat }}</span>
            <span>点击数:{{ photoInfo.click }}</span>
        </div>

        <hr>

        <!-- 在多数情况下，可能不方便修改第三方组件的样式，此时就可以在外边包裹一个div，使用后代选择器的方式去覆盖样式 -->
        <div class="tumbs">
            <!-- 缩略图区域-->
            <vue-preview :slides="slide1" class="thumbs"></vue-preview>
        </div>

        <!-- content 以html进行渲染-->
        <div v-html="photoInfo.content" class="content"></div>

        <!-- 在页面中使用子组件，并传递id进入，以便于子组件知道需要加载的是那个评论 -->
        <comment :id="id"></comment>
    </div>
</template>

<script>
    // 1. 导入评论子组件
    import comment from '../subcomponent/Comment.vue'

    export default {
        name: "PhotoInfo",
        data() {
            return {
                // 从路由中获取到的 图片Id
                id: this.$route.params.id,
                photoInfo: {},
                slide1: []
            }
        },
        created() {
            // 页面初始化时，就加载数据
            this.getPhotoInfo()
            this.getTumbsImgs()
        },
        methods: {
            getPhotoInfo() {
                this.$http.get('api/getimageInfo/' + this.id).then(result => {
                    if (result.body.status === 0) {
                        this.photoInfo = result.body.message[0]
                    }
                })

            },
            getTumbsImgs() {
                this.$http.get('api/getthumimages/' + this.id).then(result => {
                    result.body.message.forEach(item => {
                        item.w = 600
                        item.h = 400
                        item.msrc = item.src
                    })
                    this.slide1 = result.body.message
                })
            }
        },
        components: { // 挂载以启用子组件
            comment
        }
    }
</script>

<style lang="less" scoped>
    .cmt-container {
        padding: 8px;

        .title {
            font-size: 15px;
            color: #26a2ff;
            text-align: center;
            margin: 15px;
        }

        .subtitle {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
        }

        /*
            /deep/  是 Vue中特有的 深度选择器 >>> 的别名
            因为 >>> 在一些样式编写时兼容性不是那么好（例如sass和less）
            所以使用/deep/ 来取代

            因为单文件组件加上scoped后样式只会作用于该组件，父组件的样式将不会渗透到子组件中。
            也就是 样式语法正确，但是就是没有效果
            此时有2种解决方法：
                1. 取消scoped 转变为全局样式（不推荐 ）
                2. 在不起作用的样式前面 添加上深度选择器
         */

        .thumbs {
            /deep/ .my-gallery {
                display: flex;
                /* 默认flex布局是不会换行的，该属性会使其在需要换行的地方自动换行 */
                flex-wrap: wrap;

                figure {
                    width: 100px;
                    height: 100px;
                    margin: 10px 10px;
                    margin-right: 0;
                    box-shadow: 0 0 9px #999;

                    img {
                        width: 100px;
                        height: 100px;
                    }
                }

            }
        }

        .content {
            font-size: 13px;
            line-height: 30px;
        }
    }
</style>